<template>
    <div class="ConferenceCreate">
        <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
        <div class="title_wrap">
            <el-form :model="conferenceDetail" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
            <div class="title_wrap_item" style="margin:0;">
                <span style="color: #333333;font-weight: 400;">会议名称：</span>
                <el-form-item prop="title">
                    <el-input maxlength = "50" v-model = "conferenceDetail.title" placeholder = "请输入会议名称" style = "width:460px" clearable></el-input>
                </el-form-item>
            </div>
            <div class="title_wrap_item">
                <span style="color: #333333;font-weight: 400;">会议时间：</span>
                <el-form-item prop="meetingTime">
                    <el-date-picker
                        type="datetime"
                        placeholder = "请选择会议时间"
                        style = "width:460px;margin-right:12px"
                        v-model = "conferenceDetail.meetingTime" 
                        :clearable = "false"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
            </div>
            <div class="title_wrap_item">
                <span style="color: #333333;font-weight: 400;">会议类型：</span>
                <el-form-item prop="type">
                <el-select v-model="conferenceDetail.type"
                    placeholder = "请选择会议类型"
                    style="width:460px;margin-right:20px;height:36px">
                    <el-option
                    v-for = "item in tabsOption"
                    :key = "item.value"
                    :label = "item.label"
                    :value = "item.value"
                    ></el-option>
                </el-select>
                 </el-form-item>
            </div>
            </el-form>
        </div>
        <div style="margin-top:20px;margin-bottom:80px;">
            <UploadFile 
                :title ="'附件'" :subTitle = "subTitle" :showUploadButton ="showUploadButton"
                :maxNumber ="1" :maxSize = "10" :fileTypes ="['PDF']" 
                :showDleteButton = "showDleteButton" :fileData = "conferenceDetail.attachList" :actionUrl = "actionUrl" 
                @deletefile = "deleteFile"
                @uploadsuccess = "uploadSuccess"/>
        </div>
        <div class="sureButton">
            <el-button type="reset" @click="cancel" style="margin-right: 10px;">取消</el-button>
            <el-button type="primary" @click="onSubmit" :loading= "submitLoading">提交</el-button>
        </div>
    </div>
</template>
<script>
export default {
    components: {
        Breadcrumb : () => import('@/components/IncorruptibleArchives/Breadcrumb.vue'),
        UploadFile: () => import('../../comonComponent/uploadFile')
    },
    data() {
        return {
            rules: {
                title:[{ required: true, message: '请选填写会议名称', trigger: 'change' }],
                meetingTime:[{ required: true, message: '请选择会议时间', trigger: 'change' }],
                type:[{ required: true, message: '请选择会议类型', trigger: 'change' }],
            },
            submitLoading: false,
            // 面包屑导航数据
            Breadcrumb: [
                { name: "监督举报", link: "Expenditure" },
                { name: "动态监督", link: "" },
                { name: "三重一大", link: "Conference" },
                { name: "上传信息", link: "" }
            ],
            tabsOption: [
                { value: '1', label: '党组织会议'},
                { value: '2', label: '总经理办公会议'},
                { value: '3', label: '董事会会议'}
            ],
            conferenceDetail: {
                attachList: [],
                title: '',
                meetingTime:'',
                type:''
            },
            subTitle: '文件只支持PDF格式',
            showUploadButton: true,
            showDleteButton: true,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                }
            }
        }   
    },
    props: {

    },
    computed: {
        //图片获取根路径
        actionUrl() {
            return this.Api.uploadFile;
        },
    },
    mounted() {},
    methods: {
        // 取消
       cancel() {
           this.$router.go(-1)
       },
        // 提交
       onSubmit() {
           let validBoolean = false
           this.$refs['ruleForm'].validate(valid => {
               validBoolean = valid
           })
           
           let titleCorrect = this.conferenceDetail.title.trim() === ''
           let typeCorrect = this.conferenceDetail.type === ''
           let meetingTimeCorrect = this.conferenceDetail.meetingTime === ''
           let attachListCorect = this.conferenceDetail.attachList.length === 0
           if (attachListCorect) {
               this.$message.warning('请选择上传附件')
           }
           if(!validBoolean || attachListCorect) {
               return
           }
           this.submitLoading = true
           this.Api.doMeetingAdd(this.conferenceDetail).then(res => {
               if (res && res.code === '0') {
                   this.$message.success('上传成功')
                   this.$router.go(-1)
               } else {
                   this.$message.warning(res.message)
                }
               this.submitLoading = false
           })
       },
       // 删除文件
        deleteFile (item, index) {
            this.conferenceDetail.attachList.splice(index, 1)
            this.$message.success(`成功删除文件: ${item.name}`)
        },
        // 文件添加成功
        uploadSuccess (data) {
            if (this.conferenceDetail.title === '') {
                this.conferenceDetail.title = data.name.substring(0, data.name.lastIndexOf('.'))
            }
            this.conferenceDetail.attachList.push(data)
        },
    }
}
</script>
<style lang="less" scoped>
    .ConferenceCreate{
        width: 100%;
        height: 100%;
        position: relative;
        .title_wrap {
            background-color: #FFFFFF;
            width: 100%;
            padding:20px;
            margin-top: 30px;
            .title_wrap_item {
                margin-top: 20px;
                display: flex;
                align-items: center;
                /deep/.el-form-item{
                    margin:0;
                }
            }
        }
        .sureButton {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100%;
			padding: 10px 20px;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			align-items: center;

		}
    }
</style>